<template>
	<div class="attractions">
		<Header />
		<div class="page-header">
			<h1>汉中经典景点</h1>
			<p>探索汉中的历史与自然之美，以下是精心挑选的特色景点</p>
		</div>

		<div class="attraction-grid">
			<el-card v-for="attraction in attractions" :key="attraction.id" class="attraction-card"
				shadow="hover" @click="$router.push({ name: 'AttractionDetail', params: { id: attraction.id } })">
				<img :src="attraction.image" :alt="attraction.name" />
				<div class="card-content">
					<h3>{{ attraction.name }}</h3>
					<p>{{ attraction.description }}</p>
					<el-button type="primary" size="small"
						@click="$router.push({ name: 'AttractionDetail', params: { id: attraction.id } })"
						class="detail-button">查看详情</el-button>
				</div>
			</el-card>
		</div>
		<div class="block">
			<!-- 分页组件 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="form.pageNo" :page-sizes="[4,6,8]" :page-size="form.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Header.vue'

	export default {
		name: 'Attractions',
		components: {
			Header
		},
		data() {
			return {
				attractions: [],
				filteredAttractions: [],
				form: {
					keywords: '',
					pageNo: 1,
					pageSize: 4
				},
				total: 0,
				isInitialized: false // 添加初始化标志
			}
		},
		watch: {
			'$route.query.q': {
				immediate: true,
				handler(newQ) {
					this.form.keywords = newQ || '';
					console.log(this.form.keywords);
					if (this.isInitialized) {
						this.findList();
					}
				}
			}
		},
		methods: {
			//当在下拉框改变页数大小时触发此函数
			handleSizeChange(pageSize) {
				this.form.pageSize = pageSize;
				this.findList();
			},
			handleCurrentChange(num) { //当重新改变当前页数时触发
				this.form.pageNo = num;
				this.findList();
			},
			findList() {
				this.$http.post("userApi/attractions/info", this.form).then((resp) => {
					if (resp.data.code == 200) {
						if (resp.data.code == 200) {
							this.total = resp.data.data.total;
							this.attractions = resp.data.data.list;
						}
					}
				})
			}
		},
		mounted() {
			// 只在首次加载时调用findList
			if (!this.isInitialized) {
				this.findList();
				this.isInitialized = true;
			}
		},
		activated() {
			// 当页面被激活时（从缓存中恢复），重新过滤数据
			// 无论是否有搜索关键词，都要重新过滤
			this.filterAttractions(this.$route.query.q);
		}
	}
</script>

<style scoped>
	.attractions {
		padding-top: 100px;
		/* 避免被固定导航栏遮挡 */
	}

	.page-header {
		max-width: 1200px;
		margin: 0 auto 40px;
		text-align: center;
	}

	.attraction-grid {
		max-width: 1200px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 30px;
		padding: 0 20px;
	}

	.attraction-card {
		border: none;
		background: white;
		border-radius: 10px;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: transform 0.3s;
	}

	.attraction-card:hover {
		transform: translateY(-5px);
	}

	.attraction-card img {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.card-content {
		padding: 20px;
	}

	.card-content h3 {
		color: #2c3e50;
		margin: 0 0 10px;
	}

	.card-content p {
		color: #34495e;
		line-height: 1.5;
		margin: 0 0 10px;
	}

	.detail-button {
		width: 100%;
		margin-top: 10px;
	}

	.block {
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		margin: 10px 0;
		/* 上下间距，可根据需求调整 */
	}
</style>